<template>
	<view class="sale-cart-bar">
		<view class="fade" :class="{show:show}"    @click="show=!show"></view>
		<view class="cart-list" :class="{show:show}">
			<view class="dec">已减{{(info.oldPrice - info.nowPrice).toFixed(2)}}元</view>
			<view class="title">
				<text class="name">已选商品</text>
				<text class="clear" @click="clear">清空</text>
			</view>
			<view class="items">
				<view class="item" v-for="(item,index) in cartValues" :key="index">
					<view class="name">
						<text class="goodsName">{{item.name}}</text>
						<text v-if="item.skuName" class="skuName">{{item.skuName}}</text>
					</view>
					<text class="price">￥{{item.nowPrice*item.number}}</text>
					<sale-num-edit class="sale-num" @add="add" @dec="dec" :key="item.key" :sk="item.key" :value="item.number"></sale-num-edit>
				</view>
			</view>
		</view>
		<view class="bottom">
			
		
		<view class="cart-btn">
		<view class="cart" :class="{light:info.number>0}" @click="fade">
			<text class="iconfont icongouwuche2"></text>
		</view>
		<view class="badge" v-if="info.number>0">
			<text class="txt">{{info.number}}</text>
		</view>
		</view>
		 <view class="none" v-if="info.number==0">
			未选购产品
		</view>
	
		
		<view class="prices" v-if="info.number>0">
			<text class="now">￥{{info.nowPrice}}</text>
			<text class="old">￥{{info.oldPrice}}</text>
		</view>
		
		<view class="desc" v-if="info.nowPrice<price&&type==0&&price>0">
			￥{{price}}元起送
		</view> 
		
		<view class="btn" v-if="info.number>0&&info.nowPrice>=price" @click="toCommit">
			去结算
		</view>
		
	</view>
	</view>
	
</template>

<script>
	import saleNumEdit	from '@/components/sale-num-edit/sale-num-edit.vue'
	import {addCartBykey,decCartByKey} from '@/common/js/cart.js'
	export default {
		props:{
			cart:Object,
			type:Number,
			price:Number
		},
		components:{
			saleNumEdit
		},
		computed:{
			cartValues(){
				return Object.values(this.cart)
			},
			info(){
				let number = 0
				let oldPrice = 0
				let nowPrice = 0
				this.cartValues.forEach(item=>{
					number += item.number
					oldPrice += item.oldPrice*item.number
					nowPrice += item.nowPrice*item.number
				})
				return {number,oldPrice:oldPrice.toFixed(2),nowPrice:nowPrice.toFixed(2)}
			}
		},
		methods:{
			toCommit(){
				if(this.info.nowPrice<this.price)return
				this.$emit("toCommit")
			},
			clear(){
				this.show = false
				// this.cart = {}
				this.$emit("update",{})
			},
			add(key){
				let res = addCartBykey(this.cart,key,1)
				this.$emit("update",res)
			},
			dec(key){
				let res =  decCartByKey(this.cart,key,1)
				this.$emit("update",res)
			},
			fade(){
				//没有东西
				if(!this.show&&this.info.number==0){
					return
				}
				this.$nextTick(()=>{
					this.show = !this.show
				})
			}
		},
		data() {
			return {
				show:false
			};
		}
	}
</script>

<style lang="stylus">
	.sale-cart-bar
		z-index 1
		height 120upx
		position fixed
		bottom 0
		left 0
		right 0
		.fade
			z-index 0
			visibility hidden
			position fixed
			top 0
			right 0
			left 0
			bottom 0
			background-color #4F4E4E
			transition all .3s 
			opacity 0
			&.show
				visibility:visible
				opacity 0.8
		.cart-list
			z-index -1
			visibility hidden
			background-color white
			// transform translateY(100%)
			transition all .3s
			&.show
				visibility visible
				transform translateY(-100%)
			.dec
				height 30upx
				background-color #CF8888
				color #000000
				font-size 14upx
				display flex
				align-items center
				justify-content center
			.title
				height 58upx
				background-color #E3DFDF
				display flex
				justify-content space-between
				align-items center
				padding 0 20upx
				.name
					color #5F5E5E
					font-size 22upx
				.clear
					color #5F5E5E
					font-size 20upx
			.items
				.item
					padding 0 20upx
					display flex
					align-items center
					height 109upx
					border-bottom 1px solid #EFEFEF
					.name
						flex 1
						display flex
						flex-direction column
						justify-content center
						.goodsName
							margin-bottom 8upx
							color #000000
							font-size 24upx
						.skuName
							color #A1A1A1
							font-size 18upx
					.price
						color #A24545
						font-size 24upx
						margin-right 44upx
		.bottom
			position absolute
			top 0
			right 0
			left 0
			height 120upx
			padding 0 36upx
			background-color #009C4E
			display flex
			.cart-btn
				position relative
				background-color #B54949
				padding 10upx 10upx 
				width 80upx
				height 80upx
				border-radius 50%
				margin-top -20upx
				.badge
					width 30upx
					height 30upx
					position absolute
					top -10upx
					right 10upx
					font-size 16upx
					background-color red
					color white
					border-radius 50%
					display flex
					align-items center
					justify-content center
				.cart
					width 100%
					height 100%
					background-color #696060
					position relative
					display flex
					align-items center
					justify-content center
					border-radius 50%
					.icongouwuche2
						font-size 40upx
						font-weight 800
						color #BBB1B1
					&.light
						background-color #335C67
						.icongouwuche2
							color white
			.none
				margin-top 30upx
				color #BBB2B2
				font-size 24upx
				margin-left 16upx
				flex 1
			.desc
				margin-top 30upx
				color #ECEAEA
				font-size 24upx
			.prices
				margin-top 30upx
				flex 1
				margin-left 20upx
				.now
					font-size 30upx
					color white
				.old
					font-size 20upx
					text-decoration line-through
					margin-left 10upx
					color #BBB2B2
			.btn
				width fit-content
				padding 0upx 20upx
				color white
				font-size 30upx
				margin-top 10upx
				height 60upx
				display flex
				align-items center
				justify-content center
				background-color #4CD964
					
</style>
